<template>
  <div id="detail-wrapper">
    <h1 class="title">{{ item.question }}</h1>
    <div class="userInfo">      
      <div class="answerTime">
        <img :src="lookAvtar" class="avtar">
        <span class="reader">浏览{{ item.reader_count }}次</span>
        <span>{{ item.create_time }}</span>
      </div>

      <div class="resume-box" v-if="isAnswer">
        <el-button @click="resume" type="danger" size="mini" plain icon="el-icon-edit">回复</el-button>
      </div>
    </div>
    <div class="answer-content" :key="index" v-for="(child, index) in item.answer_content">
      <div class="avtar-box">
        <img :src="userDefault">
      </div>

      <div class="content">
        <div class="username">{{ child.replier }}</div>
        <div v-if="item.answer_content.length" class="answer-content-text">{{ child.content }}</div>        
        <div class="time">{{ child.create_time }}</div>
      </div>
    </div>

    <transition name="el-zoom-in-top">      
      <div v-show="show" class="answerArea">
        <div class="answer-item">
          <div class="answer-avtar">
            <img :src="userDefault">
          </div>

          <div class="answer-input-box">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入回复内容"
              :maxlength="500"
              :show-word-limit="true"
              v-model="textarea">
            </el-input>
            <div class="button-group">
              <el-button @click="close" size="mini" style="margin-right: 15px" type="info" plain>取消</el-button>            
              <el-button @click="resumePost" type="danger" size="mini">回复</el-button>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { getHeader } from '@/app.config'

export default {
  name: 'questionDetail',
  props: {
    detail: {
      type: Object
    },
    isAnswer: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    this.item = this.detail
  },
  data() {
    return {
      item: {},
      show: false,
      textarea: '',
      lookAvtar: require('../../assets/look.png'),
      avtarDefault: require('../../assets/avtar.png'),
      userDefault: require('../../assets/user.png')
    }
  },
  methods: {
    resume() {
      this.show = true
    },
    close() {
      this.show = false
    },
    reload() {
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/account/user/question_details?question_id=${this.item.question_id}`, {headers: getHeader()})
      .then(res => {
        if(res.status === 200) {
          if(res.data.code === 200) {
            this.item = res.data.details
            this.isAnswer = res.data.is_answer           
          }
        }
      }).catch(error => {
        console.log(error)
      })
    },
    resumePost() {   
      let data = {}
      data.question_id = this.item.question_id
      data.answer_content = this.textarea
         
      this.$axios.post(`${process.env.VUE_APP_KANBAN_HOST}/api/account/user/answer/question`, data, {headers: getHeader()}) 
      .then(res => {
        if(res.status === 200) {
          if(res.data.code === 200) {
            this.$message({
              message: '回复成功!',
              type: 'success'
            })
            this.show = false
            this.reload()
          } else {
            if(res.data.msg) {
              this.$message({
                message: res.data.msg,
                type: 'error'
              })
            }
          }
          this.textarea = ''
        }
      }).catch(error => {
        console.log(error)
      })         
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-drawer__header{
    background-image: linear-gradient(0deg,rgba(0,180,60,0) 0,rgba(0,180,60,.1) 100%);
  }
  #detail-wrapper{
    padding: 0 50px 20px 50px;
    background-image: linear-gradient(0deg,rgba(0,180,60,0) 0,rgba(0,180,60,.1) 100%);
    .title{
      margin-bottom: 16px;
      font-size: 20px;
      font-weight: 600;
      line-height: 40px;
      color: #07111b;
    }
    .userInfo{
      display: flex;
      .resume{  
        margin: auto 0;     
      }
      .answerTime{
        flex: 1;
        margin: auto 0;        
        font-size: 12px;
        color: #93999f;
        line-height: 24px;
        img{
          width: 24px;
          height: 24px;
          vertical-align: middle;
        }
        .reader{
          margin-right: 8px;
          margin-left: 8px;
        }
      }
    }
    .answer-content{
      margin-left: 30px;
      margin-top: 30px;
      display: flex;
      .avtar-box{
        width: 48px;
        height: 48px;
        border-radius: 50%;
        img{
          width: 100%;
          border-radius: 50%;
        }
      }
      .content{
        flex: 1;
        margin-left: 15px;
        .username{
          font-size: 14px;
          color: #93999f;
          line-height: 24px;
          font-weight: 400;
        }
        .answer-content-text{
          font-size: 14px;
          color: #07111b;
          text-align: left;
          line-height: 28px;
          word-wrap: break-word;
          white-space: pre-wrap;
        }
        .time{
          text-align: right;
          font-size: 12px;
          color: #93999f;
          line-height: 24px;
        }
      }
    }
    .answerArea{      
      .answer-item{
        display: flex; 
        margin-top: 20px;       
        .answer-avtar{
          width: 48px;
          height: 48px;
          border-radius: 50%;
          margin-right: 20px;
          img{
            width: 100%;
            border-radius: 50%;
          }
        }
        .answer-input-box{
          flex: 1;
          position: relative;
          .button-group{
            position: absolute;
            bottom: -50px;
            right: 20px;
          }
        }
      }
    }
  }
</style>